<template>
  <div class="components-container">
    <div>
      <el-radio v-model="radio1" label="1" border @change="setOptions">响应时长</el-radio>
      <el-radio v-model="radio1" label="2" border @change="setOptions">网络耗时</el-radio>
    </div>
    <div id="myChart" :style="{width: '1400px', height: '800px',padding:'20px'}"/>
  </div>
</template>

<script>
var echarts = require('echarts');
import request from '@/utils/request';
import geojson from '@/assets/aa.json';

export default {
  name: 'AppArea',
  data() {
    return {
      radio1: '1',
      chart: null,
      // echarts数据
      echartsData: {
        date: '',
        time: [],
        webTime: []
      }
    };
  },
  mounted() {
    this.initCharts();
    this.fectchData();
  },

  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart'));
      echarts.registerMap('HK', geojson);
      this.setOptions();
    },
    setOptions() {
      const option = {
        title: {
          text: '柬埔寨访问接口耗时' + this.echartsData.date,
          subtext: ''
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (ms)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 0,
          max: 2000,
          right: 200,
          bottom: 50,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#0000ff', '#00ffff', '#dfd82d', '#00adff', '#ff0000']
          }
        },
        series: [
          {
            name: '接口耗时',
            type: 'map',
            mapType: 'HK', // 自定义扩展图表类型
            itemStyle: {
              normal: { label: { show: true }},
              emphasis: { label: { show: true }}
            },
            data: this.radio1 === '1' ? this.echartsData.time : this.echartsData.webTime
          }
        ]
      };
      this.chart.setOption(option);
    },
    fectchData() {
      this.chart.showLoading();
      request({
        url: '/v1/statistics/web/app/area',
        method: 'get'
      }).then(response => {
        this.chart.hideLoading();
        this.parseSerierData(response.data);
        this.setOptions();
      });
    },
    parseSerierData(data) {
      var timeDatas = [];
      var webTimeDatas = [];
      for (var row of data) {
        var userData = {};
        var webTime = {};
        // 一个用户的所有来源
        userData.name = row.area;
        userData.value = row.time;
        timeDatas.push(userData);
        webTime.name = row.area;
        webTime.value = row.webTime;
        webTimeDatas.push(webTime);
        this.echartsData.date = row.date;
      }
      this.echartsData.time = timeDatas;
      this.echartsData.webTime = webTimeDatas;
    }
  }
};
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
    padding: 20px;
  }
</style>
